<template>
  <div class="edit-box" teleport="body">
    <h1>修改管理员信息</h1>
    <el-form :model="admin" label-width="120px">
      <el-form-item label="编号">
        <!-- <el-input v-model="admin.adminid" /> -->
        <span>{{ admin.adminid }}</span>
      </el-form-item>

      <el-form-item label="姓名">
        <!-- <el-input v-model="admin.adminname" /> -->
        <span>{{ admin.adminname }}</span>
      </el-form-item>

      <el-form-item label="密码">
        <el-input type="password" v-model="admin.password" />
      </el-form-item>

      <el-form-item label="角色">
        <!-- <el-input v-model="admin.role" /> -->
        <el-radio-group v-model="admin.role">
          <el-radio :label="1">超级管理员</el-radio>
          <el-radio :label="2">普通管理员</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-tree
        ref="treeRef"
        :data="menudata"
        show-checkbox
        node-key="id"
        hightlight-current
        :default-checked-keys=newarr
      />
      <el-form-item>
        <el-button type="primary" @click="saveFn">修改</el-button>
        <el-button type="primary" @click="cancelFn">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
    
<script setup lang="ts">
import { ElMessage, ElTree } from "element-plus";
import { ref, reactive, watch } from "vue";
import service from "../../../utils/service";
import { menudata } from "../../../grants/menudata";

//声明属性

// let treeRef = ref(null)
const treeRef = ref<InstanceType<typeof ElTree>>()



const newarr = ref<string[]>([])
const newarr1 : any = []




const emit = defineEmits<{
  (e: "hide"): void;
  (e: "updatesuccess"): void;
}>();

//声明类型
interface IAdmin {
  adminname: string;
  password: string;
  role: number; //1：超管 2：普通管理员
  adminid: string;
  checkedKeys: [] | any;
}



//当前管理员的数据
const admin = reactive<IAdmin>({
  adminname: "",
  password: "",
  role: 1, //1：超管 2：普通管理员
  adminid: "",
  checkedKeys: [],
});



//取消
const cancelFn = () => {
  //触发隐藏事件
  emit("hide");
};

const props = defineProps<{
  adminname: string;
}>();

//获取管理器的信息，根据adminname进行获取
const getAdminDetail = () => {
  service({
    url: "admin/detail",
    params: {
      adminname: props.adminname,
    },
  }).then((res) => {
    console.log("res.data",res.data);
    
    if (res.data.code === "200") {
      admin.adminname = res.data.data[0].adminname;
      admin.adminid = res.data.data[0].adminid
      admin.role = res.data.data[0].role;
      admin.checkedKeys = res.data.data[0].checkedKeys;
      // console.log(admin.checkedKeys);
      console.log(res.data.data[0]);
      
      newarr.value = res.data.data[0].checkedKeys
      newarr.value.forEach(item=>{
        if(item.length > 1){
          newarr1.push(item)
        }
      })
      newarr.value = newarr1
    }
  });
};
// getAdminDetail();

watch(
  props,
  () => {
    getAdminDetail();
    admin.password = ""; //密码清空
  },
  {
    deep: true,
  }
);

//修改操作人员信息
const saveFn = () => {
  let arr = treeRef.value!.getCheckedKeys()

  let halfArr = treeRef.value!.getHalfCheckedKeys()

  arr = arr.concat(halfArr).sort()

  // let arr = treeRef.value.getCheckedKeys()

  // console.log("arr",arr);
  
  admin.checkedKeys = arr
  
  service({
    url: "admin/update",
    method: "post",
    data: admin
  }).then((res) => {
    if (res.data.code === "200") {
      ElMessage({
        message: "修改成功！",
        type: "success",
      });
      // console.log(admin.checkedKeys);

      emit("hide"); //关掉自己
      emit("updatesuccess");
    }
  });
};
</script>
    
<style scoped>
.edit-box {
  padding: 40px 0;
  width: 400px;
  /* height: 500px; */
  border: 1px solid #e5e4e4;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #ededed;
  z-index: 999;
}
.edit-box h1 {
  text-align: center;
}
.el-input {
  width: 200px;
}
span {
  width: 200px;
}
.el-tree {
  margin-left: 70px;
  width: 200px;
  background-color: #ededed;
}
</style>